<template>
	<view class="navigator-container">
		<view class="navigator">
			<image class="navigatorLogo" :src="navigatorLogo"></image>
			<view>
				<image class="bell" src="/static/bell.png"></image>
				<image class="add" src="/static/add.png" @click="onAddClick"></image>
			</view>
		</view>
		
		<!-- 弹出菜单 -->
		<view v-if="showMenu" class="menu-overlay" @click="hideMenu">
			<view class="menu-popup" @click.stop>
				<view class="menu-item" @click="addDevice">
					<image class="menu-icon" src="/static/add_device.png"></image>
					<text class="menu-text">{{ $t('device.addDevice') }}</text>
				</view>
				<!-- <view class="menu-item" @click="scanQRCode">
					<image class="menu-icon" style="background-color: #22B800;" src="/static/scan.png"></image>
					<text class="menu-text">{{ $t('device.scanQRCode') }}</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"Navigator",
		data() {
			return {
				navigatorLogo: '/static/navi_logo.png',
				showMenu: false       // 控制菜单显示
			}
		},
		mounted() {
			this.getNavigatorLogo()
		},
		methods: {
			getNavigatorLogo() {
				const account = uni.getStorageSync('account')
				if (account != null && account != '') {
					this.navigatorLogo = account.navigatorLogo
				}			
			},
			onAddClick() {
				this.showMenu = !this.showMenu
			},
			hideMenu() {
				this.showMenu = false
			},
			addDevice() {
				this.hideMenu()
				// 处理添加设备逻辑
				// uni.navigateTo({
				// 	url: '/pages/device/selectproduct'
				// })
				uni.navigateTo({
					url: '/pages/device/devicesettingguide'
				})
			},
			scanQRCode() {
				this.hideMenu()
				// 处理扫描二维码逻辑
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navigator-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		width: 100%;
		
		.navigator {
			display: flex;
			align-items: flex-end;
			justify-items: center;
			width: 100%;
			background-color: #FFFFFF;
			height: 100px;
			padding-top: 44px;
			box-sizing: border-box;
			border-bottom: 1px solid #e0e0e0;
			view {
				display: flex;
				justify-items: end;
				margin-left: auto;
				margin-bottom: 10px;

				.bell {
					width: 17.62px;
					height: 21px;
					margin-top: 2px;
					margin-right: 15px;
				}
				.add {
					width: 24px;
					height: 24px;
					margin-right: 15px;
				}
			}
			.navigatorLogo {
				margin-left: 20px;
				margin-bottom: 10px;
				width: 118.47px;
				height: 32px;
				flex-shrink: 0;
			}
		}
		
		.menu-overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 999;
			
			.menu-popup {
				position: absolute;
				top: 103px;
				right: 5px;
				background-color: #FFFFFF;
				border-radius: 12px;
				padding: 4px 8px;
				min-width: 140px;
				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
				
				.menu-item {
					display: flex;
					align-items: center;
					padding: 12px 8px;
					
					&:active {
						background-color: #f5f5f5;
						border-radius: 12px;
					}
					/*
					&:first-child {
						border-bottom: 2px solid #EBEFF4;
					}*/

					.menu-icon {
						width: 20px;
						height: 20px;
						margin-right: 12px;
						padding: 6px;
						border-radius: 8px;
						background-color: #567DF5;
					}
					
					.menu-text {
						color: #333;
						font-size: 14px;
						font-weight: 400;
					}
				}
			}
		}
	}
</style>